$(function () {

    // 先确定本地中是否有数据，有数据直接创建内容
    setLi();
    $("#title").on("keydown", function (e) {
        if (e.keyCode == 13) {
            if ($(this).val() == "") {
                return false
            } else {
                // 先拿到本地存储的数据
                var local = getData();
                // 将表单里面的值追加到数组中
                local.push({ title: $(this).val(), done: false });
                // 将数据保存到本地
                saveData(local);
                // 当按下回车时，创建li内容,有多少数据就创建几个li
                setLi();
                // 创建完了以后清空表单里面的值
                $(this).val('');
            }

        }
    });
    // 删除操作，点击时，删除的是当前li，需要a标签的索引号
    $(".underway ol, .finish ul").on("click", "a", function () { // 事件委派

        $(this).parents("li").remove();
        var data = getData();
        // 本地存储的数据也要删除，所以需要索引号
        var index = $(this).attr("index");
        data.splice(index, 1);
        saveData(data);
        setLi();
    })
    // 获取本地存储数据
    function getData() {
        // 判断本地存储是否有数据
        if (localStorage.getItem("todolist") !== null) {
            return JSON.parse(localStorage.getItem("todolist"));
        } else {
            return [];
        }
    }
    // 保存数据
    function saveData(data) {
        // 保存的数据格式应为字符串
        localStorage.setItem("todolist", JSON.stringify(data));

    }
    // 创建li内容
    function setLi() {
        // 事件统计
        var todoCount = 0;
        var finishCount = 0;
        // 获取数据
        var data = getData();
        // 每次创建前，先清空ol里面的内容，防止重复创建
        $(".underway ol, .finish ul").empty();
        $.each(data, function (i, n) {
            if (n.done) {
                finishCount++;
                $(".finish ul").prepend("<li><input type='checkbox' checked = 'true'><span>" + n.title + "</span><a href='javascript:;' index='" + i + "'></a></li>")
            } else {
                todoCount++;
                $(".underway ol").prepend("<li><input type='checkbox'><span>" + n.title + "</span><a href='javascript:;' index='" + i + "'></a></li>")
            }

        })
        $("#todoCount").text(todoCount);
        $("#finishCount").text(finishCount);
    }
    // 对于已经完成的事放到完成的模块，点击复选框，让数据中的done的值和复选框的checked状态一致；
    $(".underway ol, .finish ul").on("click", "input", function () {
        // 获取数据
        var data = getData();
        // 修改数据,让数据中done的值跟随复选框的状态
        var index = $(this).siblings("a").attr("index");
        data[index].done = $(this).prop("checked");
        // 保存数据
        saveData(data);
        // 创建li内容
        setLi();
    })

})